{% extends "./_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/login.css"> 
{% endblock %} 
{% block content %}

<div class="page-container login-page-container">
    <div class="login-page-header eui--position-rel">
        <a class="eui-icon eui-icon-back eui--position-abs" href="/index"></a>
        <a href="/register/member" class="eui-btn eui--position-abs eui-btn-primary-outlined eui-btn-sm register-btn">{{__("btn_register")}}</a>
    </div>
    <div class="login-logo-wrap eui--text-center">
        <a class="eui--display-b" href="javascript:;">
            <img class="login-logo" src="{{site.cdn}}/logo_login.png" alt="">
        </a>
    </div>

    <form class="eui-login-form login-member-form eui--margin-t-20" id="member_form">
        <h1 class="login-page-title eui--text-center eui--blue-color eui--font-48 eui--font-w-normal">{{__("login_member_enter")}}</h1>        
        <div class="eui-form-group">
            <label for="name" class="eui-lable eui--font-26">
                会员名
            </label>
            <input id="name" class="eui-input eui--font-26" type="text" placeholder="请输入用户名">
        </div>
        <div class="eui-form-group">
            <label for="password" class="eui-lable eui--font-26">
                密码
            </label>
            <input id="password" class="eui-input eui--font-26" type="password" placeholder="请输入密码">
            <div class="eui--pull-right password-eye">
                <span class="eui-icon eui-icon-eye_close"></span>
            </div>
        </div>
        <a class="eui-btn eui--width-100 eui--margin-b-20 eui-btn-lg eui-btn-primary" href="javascript:;">{{__("btn_login")}}</a>
        <div class="eui-login--margin-b-250">
            <a href="javascript:;" class="phone-login-type eui--pull-left eui--556c96-color" id="phone_login_enter">{{__("login_phone_enter")}}</a>
            <a href="/findPwd/member" class="eui--pull-right eui--556c96-color">{{__("login_find_password")}}</a>
        </div>
    </form>

    <form class="eui-login-form login-phone-form eui--margin-t-20 eui--hide" id="phone_form">
        <h1 class="login-page-title eui--text-center eui--blue-color eui--font-48 eui--font-w-normal">{{__("login_phone_enter")}}</h1>        
        <div class="eui-form-group area-choose eui--clearfix">
            <label for="name" class="eui-lable eui--font-26 eui--pull-left">
                {{__("area")}}
            </label>
            <div class="eui-select-wrap eui--overflow-h eui--pull-left eui--position-rel">
                <select name="area-select" id="" class="eui-select eui--position-rel">
                    <option value="MY">{{__("area_Malaysia")}}</option>
                    <option value="SG">{{__("area_Singapore")}}</option>
                    <option value="ID">{{__("area_Indonesia")}}</option>
                    <option value="PH">{{__("area_Philippines")}}</option>
                    <option value="AU">{{__("area_Australia")}}</option>
                    <option value="US">{{__("area_United_States")}}</option>
                    <option value="TH">{{__("area_Thailand")}}</option>
                    <option value="VN">{{__("area_Vietnam")}}</option>
                    <option value="UK">{{__("area_United_Kingdom")}}</option>
                    <option value="CA">{{__("area_Canada")}}</option>                    
                    <option value="NZ">{{__("area_new_Zealand")}}</option>
                    <option value="DE">{{__("area_Germany")}}</option>
                    <option value="RU">{{__("area_Russia")}}</option>
                    <option value="IT">{{__("area_Italy")}}</option>
                    <option value="FR">{{__("area_France")}}</option>
                    <option value="SA">{{__("area_Saudi_Arabia")}}</option>
                    <option value="UA">{{__("area_Ukraine")}}</option>
                    <option value="TW">{{__("area_Taiwan")}}</option>
                    <option value="HK">{{__("area_HongKong")}}</option>
                    <option value="MO">{{__("area_Macao")}}</option>
                    <option value="OT">{{__("area_other")}}</option>
                </select>
                <span class="eui-icon eui-icon-arrow_down_dark_grey eui--position-abs"></span>
            </div>
        </div>
        <div class="eui-form-group">
            <label for="name" class="eui-lable eui--font-26">
                {{__("login_account_name")}}
            </label>
            <input id="name" class="eui-input eui--font-26" type="text" placeholder="{{__('login_account_input_tips')}}">
        </div>
        <div class="eui-form-group">
            <label for="password" class="eui-lable eui--font-26">
                {{__("password")}}
            </label>
            <input id="password" class="eui-input eui--font-26" type="password" placeholder="{{__('login_password_input_tips')}}">
            <div class="eui--pull-right password-eye">
                <span class="eui-icon eui-icon-eye_close"></span>
            </div>
        </div>
        <a class="eui-btn eui--width-100 eui--margin-b-20 eui-btn-lg eui-btn-primary" href="javascript:;">{{__("btn_login")}}</a>
        <div class="eui-login--margin-b-250">
            <a href="javascript:;" class="phone-login-type eui--pull-left eui--556c96-color" id="member_login_enter">{{__("login_member_enter")}}</a>
            <a href="/findPwd/member" class="eui--pull-right eui--556c96-color">{{__("login_find_password")}}</a>
        </div>
    </form>

    <div class="login-for-help eui--text-center">
        <a class="eui--556c96-color eui--font-26" href="/login/question">{{__("login_help")}}</a>
    </div>
    <div class="login-page-footer eui--text-center">
        <h2 class="login-page-footer-title eui--font-32 eui--margin-b-20 eui--556c96-color">{{__("login_other_type")}}</h2>
        <ul class="eui--text-center login-share-wrap">
            <li class="eui--display-i-b">
                <a class="eui-icon eui-icon-fb" href="javascript:;"></a>
            </li>
            <li class="eui--display-i-b">
                <a class="eui-icon eui-icon-google" href="javascript:;"></a>
            </li>
            <li class="eui--display-i-b">
                <a class="eui-icon eui-icon-twitter" href="javascript:;"></a>
            </li>
            <li class="eui--display-i-b">
                <a class="eui-icon eui-icon-vk" href="javascript:;"></a>
            </li>
        </ul>
    </div>
    <script>
        $('#phone_login_enter').click(function () {
            $('#member_form').hide().siblings('#phone_form').fadeIn();            
        });
        $('#member_login_enter').click(function () {
            $('#phone_form').hide().siblings('#member_form').fadeIn();            
        });
    </script>
</div>
{% endblock %}